<template>
  <view class="coupon-center">
    <view class="coupon-list">
      <!-- 优惠券列表 -->
      <view class="sub-list">
        <view
          class="row-item"
          v-for="(item, index) in collectionList"
          :key="index"
          @tap="navTo('/pages/user/coupon/detail',item.business_id,item.id)"
        >
          <view class="flex-start top-wrapper">
            <image
              :src="item.business&&item.business.logo"
              mode="aspectFill"
            ></image>
            <view class="item">
              <view class="item-title">{{item.business&&item.business.shop_name}}</view>
              <view class="item-text"> {{item.business&&item.business.favorite_count}}人关注 </view>
            </view>
          </view>
          <view class="image-wrappers flex-start" v-if="item.business">
            <view class="image-item" v-for="(imageItem, index) in item.business.products" :key="index">
              <image
                :src="imageItem.images[0].path"
                mode="aspectFill"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <rf-load-more
        :status="loadingType"
        v-if="collectionList.length > 0"
      ></rf-load-more>
    </view>
    <rf-empty
      :info="errorInfo || '暂无关注店铺'"
      v-if="collectionList.length === 0 && !loading"
    ></rf-empty>
    <!--页面加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>

<script>

import { collectList } from "@/api/userInfo";
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
export default {
  components: {
    rfLoadMore,
  },
  data() {
    return {
      collectionList: [],
      shangju:this.$mAssetsPath.shangju,
      loadingType: "more",
      page: 1,
      loading: true,
      moneySymbol: this.moneySymbol,
      errorInfo: "",
    };
  },
  onLoad(options) {
    this.initData();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.couponList.length = 0;
    this.getCouponList("refresh");
  },
  // 加载更多
  onReachBottom() {
    if (this.loadingType === "nomore") return;
    this.page++;
    this.getCouponList("more");
  },
  methods: {
    // 跳转至商品列表
    navTo(route,id,category_id) {
      this.$mRouter.push({route:route,query:{id:id,category_id:category_id}})
    },
    // 数据初始化
    initData() {
      this.getCouponList("more");
    },
    // 获取收藏列表
    async getCouponList(type) {
      await this.$http
        .get(`${collectList}`, {
          type: "business",
        })
        .then((r) => {
          this.loading = false;
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          console.log( r.data.data)
          this.loadingType = r.data.data.length === 10 ? "more" : "nomore";
          this.collectionList = [...this.collectionList, ...r.data.data];
        })
        .catch(() => {
          this.loading = false;
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
        });
    }, 
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}
.coupon-center {
  .coupon-list {
    .sub-list {
      .row-item {
        height: 307upx;
        border-top: 1upx solid #eeeeee;
        padding: 30upx;
        .top-wrapper {
          image {
            height: 80upx;
            width: 80upx;
            border-radius: 10upx;
            margin-right: 20upx;
          }
          .item {
            .item-title {
              height: 42upx;
              font-size: 30upx;
              font-weight: bold;
              line-height: 42upx;
              color: #333333;
            }
            .item-text {
              height: 33upx;
              font-size: 24upx;
              font-weight: 500;
              line-height: 33upx;
              color: #999999;
            }
          }
        }
        .image-wrappers {
          margin-top: 30upx;
          padding-left: 94upx;
          .image-item {
            image {
              width: 137upx;
              height: 137upx;
              border-radius: 10upx;
              margin-left: 14upx;
            }
          }
        }
      }
    }
  }
}
</style>
